<template>
  <div class="plan-box">
    <div class="welcome-tps" >
      日历日程工作计划表
    </div>

    <div class="main-box">

      <div class="left-box">

        <div class="time-box">


          <div class="calender">
            <el-calendar v-model="value" @click="kk" style="text-align: center"/>
          </div>
        </div>

        <div class="all-plan-box">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 text="2xl" justify="center">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="add-plan">
          <div class="block" style="padding: 10px">
            <el-date-picker
                v-model="plan.createTime"
                type="date"
                placeholder="Pick a day"
                size="default"
                style="width: 100%"
            />
          </div>

          <div class="plan-text" style="padding:0 10px;">
            <el-input
                v-model="plan.content"
                style="width: 100%"
                :rows="7"
                type="textarea"
                placeholder="Please input"
            />

          </div>

          <div class="plan-submit" style="padding:10px; display: flex;justify-content: space-between; /* 水平分布 */">
            <el-button type="success" style="width: 50%" @click="addPlanNotDo()">完成提交</el-button>
            <el-button type="primary" style="width: 50%" @click="addPlanDo()">未完提交</el-button>
          </div>


        </div>


      </div>


      <div class="right-box" >

        <div v-if="right_content===1">
          <el-space
              fill
              wrap
              :fill-ratio="fillRatio"
              :direction="direction"
              style="width: 100%"
          >
            <el-card v-for="(item,i) in planList" :key="i" class="box-card"  @click="centerDialogVisible = true" shadow="always">

              <template #header  v-if="item.state==='1'" style="background-color: #3498db">
                <div class="card-header" >
                  <span>已完成</span>

                </div>
              </template>
              <div class="text item"  v-if="item.state==='1'">
                {{ item.content}}
              </div>

              <template #header  v-if="item.state==='0'">
                <div class="card-header">
                  <span>未完成</span>
                </div>
              </template>
              <div class="text item" v-if="item.state==='0'">
                {{ item.content}}
              </div>

            </el-card>

          </el-space>



        </div>


        <el-dialog v-model="centerDialogVisible" title="Warning" center style="width: 500px;height: 600px">
    <span>
      这里是事件的具体内容
    </span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="centerDialogVisible = false">Cancel</el-button>
              <el-button type="primary" @click="centerDialogVisible = false">
                Confirm
              </el-button>
            </div>
          </template>
        </el-dialog>


        <div v-if="right_content===0">
          今日无计划----->
        </div>


      </div>



    </div>

  </div>
</template>


<script setup lang="ts">

import * as echarts from 'echarts';
import {
  getArticleCount,
  getUserCount,
  getCommentCount,
  getViewCount,
  listComments,
  getDiary,
  success_code,
  postPlan, getPlanByTime
} from "../../utils/api";
import {onMounted, reactive, ref} from "vue";
import {result} from "../../utils/type";
import {Edit} from "@element-plus/icons-vue";

import type { SpaceInstance } from 'element-plus'
import {toastE} from "../../utils/toast";
import {hex_md5} from "../../utils/md5";
import {ElMessage} from "element-plus";
const direction = ref<SpaceInstance['direction']>('horizontal')
const fillRatio = ref(30)
const planList = ref()
const right_content = ref(0)
const centerDialogVisible = ref(false)
let plan=ref({content:'',state:'',createTime:''})
const value = ref(new Date())
interface User {
  date: string
  name: string
  address: string
}
function kk(){
  console.log(value.value)
  getPlan(value.value)
}
const value1 = ref('')

function addPlanNotDo(){
  if (plan.value.content === '') {
    toastE('计划不可以为空','warning');
    return;
  }
  plan.value.state = "1"
  postPlan(plan.value).then(result=>{
  if (result.code === success_code) {
    toastE( result.message,'success')
    plan.value.content = ''
    getPlan(new Date())
  }else {
    //更新一下验证码
    ElMessage.error(result.message)

  }
})
}

function addPlanDo(){
  if (plan.value.content === '') {
    toastE('计划不可以为空','warning');
    return;
  }
  plan.value.state = "0"
  postPlan(plan.value).then(result=>{
    if (result.code === success_code) {
      toastE( result.message,'success')
      plan.value.content = ''
      getPlan(new Date())
    }else {
      //更新一下验证码
      ElMessage.error(result.message)

    }
  })
}


function getPlan(bp){
  // 创建Date对象
  const date = bp;

// 获取年、月、日
  const year = date.getFullYear(); // 获取年份
  const month = date.getMonth() + 1; // 获取月份，月份从0开始，所以需要加1
  const day = date.getDate(); // 获取日

// 格式化月份和日期，确保它们是两位数
  const formattedMonth = month.toString().padStart(2, '0');
  const formattedDay = day.toString().padStart(2, '0');

// 拼接成 "年-月-日" 格式
  const formattedDate = `${year}-${formattedMonth}-${formattedDay}`;

  getPlanByTime(formattedDate).then(result=>{
    planList.value = result.data
    console.log(planList.value)
    if (planList.value.length!=0){
      right_content.value = 1
    }else {
      right_content.value = 0
    }

  })
}
onMounted(() => {

  getPlan(new Date())
});
</script>

<style scoped >
.main-box{
  display: flex;
  justify-content: space-between; /* 水平分布 */
}
.welcome-tps{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-top: 10px;
  height: 50px;
  font-size: 40px;
  border: solid 1px #E6E6E6;
}
.left-box{
  width: 340px;

  border: solid 1px #222222;
  padding: 10px;
  margin-top: 10px;
}
.time-box{
  width: 320px;
  border: solid 1px #e74c3c;
}

.calender{
  width: 300px;
}
.el-calendar {
  --el-calendar-cell-width: 30px;

}
.all-plan-box{
  margin-top: 10px;
  border: solid 1px #3498db;
  height: 300px;

  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
}

.right-box{
  width:100%;
  border: solid 1px #3498db;
  margin-top: 10px;
  margin-left: 10px;
  padding: 10px;

}


.add-plan{
  margin-top: 10px;
  border: solid 1px #3498db;

}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>